<template>
    <div class="app-container">
        <el-form label-width="100px">
            <el-row :gutter="15">
                <el-col :span="12">
                    <el-form-item label="车辆油量">{{detail.fuelCapacity}}/16</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公里数">{{detail.vehicleMileage}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="取还车时间">{{new Date(detail.takeAlsoTime)|parseTime}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆随车物品">{{detail.accessoryItems}}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="其他描述">{{detail.remark}}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="车身照片">
                        <template v-for="item in detail.bodyImage">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image" fit="contain"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="车辆划痕">
                        <template v-for="item in detail.scratchImage">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image" fit="contain"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="内饰照片">
                        <template v-for="item in detail.interiorImage">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image" fit="contain"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="仪表盘">
                        <template v-for="item in detail.panelImage">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image" fit="contain"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="detail.signImage">
                    <el-form-item label="客户签字">
                        <template v-for="item in detail.signImage">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image" fit="contain"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="type==2">
                    <el-table :data="detail.cost">
                        <el-table-column label="扣款原因" prop="deductionsFor"></el-table-column>
                        <el-table-column label="扣款金额" prop="deductionsAmount"></el-table-column>
                        <!-- <el-table-column label="扣款方式" prop="deductionsWay">
                            <template slot-scope="{row}">
                                {{ {1:'押金抵扣', 2:'线下补缴'}[Number(row.deductionsWay)] }}
                            </template>
                        </el-table-column> -->
                 <!--       <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-search" @click="handleDetail(scope)">详情</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </el-col>
            </el-row>
        </el-form>

        <!-- <el-dialog title="详情" :visible.sync="showdatail" append-to-body width="800px" @close="nowId=null">
            <koukuanyuany v-if="showdatail" :id="nowId"></koukuanyuany>
        </el-dialog> -->
    </div>
</template>

<script>
import * as orderApi from '@/api/luxuryOrder/index';
import koukuanyuany from './components/koukuanyuany.vue'

export default {
    components: {
        koukuanyuany,
    },
    props: ['orderNo', 'type'],
    data() {
        return {
            showdatail: false,
            nowId: null,
            detail: {},
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            if (this.type == 1) {
                orderApi.deliveryList(this.orderNo).then(response => {
                    this.detail = response.data;
                });
            } else {
                orderApi.alsoCarTestInfo(this.orderNo).then(response => {
                    this.detail = response.data;
                });
            }
        },
        handleDetail(scope) {
            this.nowId = scope.row.id;
            this.showdatail = true;
        },
    },
}
</script>
